$(function () {
    $("#shares-tab > div").click(function () {
        $("#shares-content > div").eq($(this).index()).show().siblings().hide();
    });
    $("#shares-tab > div").eq(0).click();

    var center = $('.shares-holding-in > div');
    var centerTop = center.position().top + center.outerHeight(true) / 2;
    var centerLeft = center.position().left + center.outerWidth(true) / 2;
    var centerPoint = {top : centerTop, left: centerLeft};
    // 设置 canvas高
    $("#myCanvas")[0].width = $(".content").width();
    $("#myCanvas")[0].height = $(".content").height();
    var ctx = $("#myCanvas")[0].getContext("2d");
    ctx.lineWidth = 1;
    ctx.fillStyle = '#7DEDF4';
    var topBox = $('.shares-holding-top > div');
    for (var i = 0 ; i< topBox.length; i++) {
        var w = $(topBox[i]).outerWidth(true);
        var h = $(topBox[i]).outerHeight(true);
        var left = $(topBox[i]).position().left;
        var point = {
            top: h+50,
            left: left + w/2
        };
        canvasLine(point, centerPoint, ctx)
    }
    var botBox = $('.shares-holding-bottom > div');
    for (var b = 0 ; b< botBox.length; b++) {
        var botWidth = $(botBox[b]).outerWidth(true);
        var botLeft = $(botBox[b]).position().left;
        var botTop = $(botBox[b]).position().top;
        var botPoint = {
            top: botTop,
            left: botLeft + botWidth/2
        };
        canvasLine(botPoint, centerPoint, ctx)
    }
});

function canvasLine(point1, point2, ctx) {
    ctx.beginPath();
    ctx.moveTo(point1.left, point1.top); //起始位置
    ctx.lineTo(point2.left, point2.top); //停止位置
    ctx.stroke();
}